<template>
  <div>
    <el-form ref="aclDetailForm" :model="aclDetailForm" status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="菜单名称:" class="name">
        <el-input v-model="aclDetailForm.sysAclName" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
      </el-form-item>
      <el-form-item label="父菜单id:" class="name" prop="sysAclParentId">
        <el-input v-model="aclDetailForm.sysAclParentIdStr" class="input" :disabled="disabled" placeholder="请输入内容" />
      </el-form-item>
      <div class="imput-buttom">
        <el-form-item label="父菜单名称:" class="name">
          <el-select v-model="aclDetailForm.sysAclParentIdStr" class="input" :disabled="disabled" placeholder="请输入内容">
            <el-option
              v-for="item of aclParentDetailSelect"
              :key="item.uuid"
              :label="item.sysAclName"
              :value="item.idStr"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单URL:" class="name" prop="sysAclUrl">
          <el-input v-model="aclDetailForm.sysAclUrl" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单系统码:" prop="sysAclPermissionCode">
          <el-input v-model="aclDetailForm.sysAclPermissionCode" class="input" :disabled="disabled" placeholder="请输入菜单系统码" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单类型:" prop="sysAclType">
          <el-radio v-model="aclDetailForm.sysAclType" :label="-1" :disabled="disabled">系统</el-radio>
          <el-radio v-model="aclDetailForm.sysAclType" :label="0" :disabled="disabled">目录</el-radio>
          <el-radio v-model="aclDetailForm.sysAclType" :label="1" :disabled="disabled">菜单</el-radio>
          <el-radio v-model="aclDetailForm.sysAclType" :label="2" :disabled="disabled">按钮</el-radio>
          <el-radio v-model="aclDetailForm.sysAclType" :label="3" :disabled="disabled">其他</el-radio>
        </el-form-item>
        <el-form-item label="按钮动作:" class="name" prop="sysAclAction">
          <el-input v-model="aclDetailForm.sysAclAction" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属页面:" class="name" prop="sysAclRouter">
          <el-input v-model="aclDetailForm.sysAclRouter" class="input" :disabled="disabled" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
        <el-form-item label="菜单排序:" class="name" prop="sysAclSeq">
          <el-input-number v-model="aclDetailForm.sysAclSeq" :disabled="disabled" :min="1" :max="100000000" label="描述文字" />
        </el-form-item>
        <el-form-item label="菜单状态" prop="disabledFlag">
          <el-radio v-model="aclDetailForm.disabledFlag" class="input radio" :disabled="disabled" :label="0" border size="medium">启用</el-radio>
          <el-radio v-model="aclDetailForm.disabledFlag" class="input radio" :disabled="disabled" :label="1" border size="medium">禁用</el-radio>
        </el-form-item>
      </div></el-form>
  </div>
</template>

<script>
export default {
  name: 'AclDetail',
  props: {
    aclDetailToChild: {}
  },
  data() {
    return {
      aclDetailToChildData: {},
      aclParentDetailSelect: [],
      disabled: true,
      aclDetailForm: {
        id: null,
        sysAclName: '',
        uuid: '',
        fatherAclName: '',
        sysAclUrl: '',
        sysAclType: '',
        sysAclSeq: null,
        sysAclPermissionCode: '',
        sysAclParentId: null,
        sysAclAction: '',
        sysAclRouter: '',
        disabledFlag: '1'
      }
    }
  },
  watch: {
    aclDetailToChild: {
      deep: true,
      immediate: false,
      handler() {
        this.aclDetailToChildData = JSON.parse(JSON.stringify(this.aclDetailToChild))
        this.aclDetailForm = this.aclDetailToChildData.aclDetail
        this.aclDetailForm.sysAclParentIdStr = this.aclDetailForm.sysAclParentIdStr
        this.aclParentDetailSelect = this.aclDetailToChildData.aclParentSelect
      }
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>
